<template>
  <div class="register">
    <div class="regtrations">
      <div class="leftBox" :style="`backgroundImage: url(${bgimg})`">
        <div class="letfconter">
          <div>
            <img
              class="ico"
              src="../assets/register/logo-white-8962708214629a3e8f9fbf5b87b70c3ace41c4175cbcc267f7fbb8449ac45bdd.svg"
              alt=""
            />
          </div>
          <div class="conter">
            <h1>创作从这里开始</h1>
            <p>获得2,245,867张免费的高分辨率照片，在其他任何地方都找不到</p>
          </div>
          <div class="conterfooter">Nicholas Swanson于7年前上传</div>
        </div>
      </div>
      <div class="rightBox">
        <div class="joinBox">
          <div class="joinText">
            <h4>加入我们!!</h4>
            <p>
              已经有账号了
              <router-link to="/login">登陆</router-link>
            </p>
          </div>
          <div class="WeChatJoin">
            <router-link to="#">
              <img src="../assets/register/wechat.png" alt="" />
              使用微信登陆
            </router-link>
          </div>
          <p class="or">或者</p>
          <div class="joinFrom">
            <div class="username">
              <!-- 不正确的话执行 noname -->
              <span :class="name1">用户名</span>
              <span>(6~18位字母,数字和下划线) </span>
              <!-- 用户名被占用 -->
              <span class="nameemploy" v-show="ploy">
                <span style="color: #e25c3d">&nbsp;**用户名已存在**</span>
              </span>
              <input
                :class="name2"
                type="text"
                v-model="username"
                @blur="regName"
              />
            </div>
            <div class="password">
              <span :class="pwd1">密码</span>
              <span>(6~18位数字或字母)</span>
              <input
                :class="pwd2"
                type="password"
                v-model="upwd"
                @blur="regPwd"
              />
            </div>
            <div class="email">
              <span :class="uemail1">邮箱地址</span>
              <span>(例如123456@qq.com)</span>
              <input
                :class="uemail2"
                type="email"
                v-model="email"
                @blur="regEmail"
              />
            </div>
          </div>
          <div class="joinMe">
            <a href="javascript:;" @click="reg">加入</a>
          </div>
          <p class="tiaokuan">
            加入即表示您同意
            <router-link to="#">条款</router-link>
            和
            <router-link to="#">隐私政策</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style >
.register .regtrations {
  width: 100%;
  display: flex;
}
/* 左图片 */
.register .leftBox {
  width: 41%;
  height: 100vh;
  display: flex;
  overflow-y: scroll;
  position: fixed;
}
.register .leftBox {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #111111;
  flex: 1;
}
.register .leftBox > img {
  width: 100%;
  height: 100%;
}
.register .leftBox > .letfconter {
  width: 100%;
  height: 100%;
  padding: 8% 10%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.register .leftBox > .letfconter > .conter > h1 {
  font-size: 48px;
}
.register .leftBox > .letfconter > .conter > p {
  font-size: 24px;
}
.register .leftBox > .letfconter > .conterfooter {
  font-size: 15px;
}
.register .leftBox > .letfconter .ico {
  width: 64px;
}

/* 加入右 */
.register .rightBox {
  margin-left: 41%;
  width: 59%;
  box-sizing: border-box;
  padding: 45px 8% 20px;
}

.register .joinBox {
  width: 100%;
}
.register .joinText > h4 {
  font-weight: 700;
  font-size: 46px;
  text-align: center;
  margin-bottom: 16px;
  color: #111111;
}
.register .joinText {
  padding-bottom: 20px;
}
.register .joinText > p {
  text-align: center;
  color: #111111;
  font-size: 15px;
}
.register .joinText > p > a {
  color: #767676;
}
.register .WeChatJoin {
  width: 100%;
  height: 45px;
  line-height: 45px;
  border-radius: 3px;
  background-color: #02bb29;
  text-align: center;
  margin-bottom: 24px;
}
.register .WeChatJoin > a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
}
.register .WeChatJoin > a > img {
  width: 18px;
  padding-right: 5px;
}
.register .joinBox > .or {
  text-align: center;
  font-size: 12px;
  margin-bottom: 5px;
}
.register .joinFrom > .username {
  font-size: 15px;
  font-weight: 100;
  color: #767676;
  margin-bottom: 24px;
}

/* 验证失败时用户样式 */
.register .joinFrom > .username > span.noname {
  color: #e25c3d !important;
}
.register .joinFrom > .username > input.noname {
  border-color: #e25c3d;
}
/* 用户名被占用样式 */
.register .joinFrom > .username .nameemploy {
  display: inline-block;
  padding-left: 15px;
}

.register .joinFrom > .username > span {
  display: inline-block;
  margin-bottom: 5px;
}
.register .joinFrom > .username > .uname {
  color: #111;
}
.register .joinFrom > .username > input {
  width: 100%;
  height: 40px;
  display: block;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #767676;
  font-size: 15px;
  padding: 6px 12px;
}

.register .joinFrom > .password {
  font-size: 15px;
  font-weight: 100;
  color: #767676;
  margin-bottom: 24px;
}

/* 验证失败时密码样式 */
.register .joinFrom > .password > span.nopwd {
  color: #e25c3d !important;
}
.register .joinFrom > .password > input.nopwd {
  border-color: #e25c3d;
}

.register .joinFrom > .password > span {
  display: inline-block;
  margin-bottom: 5px;
}
.register .joinFrom > .password > .upwd {
  color: #111;
}
.register .joinFrom > .password > input {
  width: 100%;
  height: 40px;
  display: block;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #767676;
  font-size: 15px;
  padding: 6px 12px;
}

.register .joinFrom > .email {
  font-size: 15px;
  font-weight: 100;
  color: #767676;
  margin-bottom: 24px;
}
.register .joinFrom > .email > span {
  display: inline-block;
  margin-bottom: 5px;
  color: #767676;
}
.register .joinFrom > .email > .uemail {
  color: #111;
}

.register .joinFrom .email > input {
  width: 100%;
  height: 40px;
  display: block;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #767676;
  font-size: 15px;
  padding: 6px 12px;
}

/* 邮箱验证失败 */
.register .joinFrom > .email > span.noemail {
  color: #e25c3d !important;
}
.register .joinFrom > .email > input.noemail {
  border-color: #e25c3d;
}

.register .joinMe {
  width: 100%;
  height: 45px;
  line-height: 45px;
  border-radius: 3px;
  background-color: #111;
  text-align: center;
  margin-bottom: 24px;
}
.register .joinMe > a {
  display: block;
  width: 100%;
  color: #fff;
  text-decoration: none;
}

.register .tiaokuan {
  text-align: center;
  font-size: 13px;
  color: #767676;
}
.register .tiaokuan > a {
  color: #767676;
}
</style>
<script>
import bgimg from "../assets/register/stones.jpg";
export default {
  data() {
    return {
      bgimg: bgimg,
      // 用户名密码样式
      name1: "uname",
      name2: "",
      pwd1: "upwd",
      pwd2: "",
      uemail1: "uemail",
      uemail2: "",
      // 用户名
      username: "",
      // 密码
      upwd: "",
      email: "",
      // 用户名重复
      ploy: false,
      regname: false,
      ppp: 0,
    };
  },
  methods: {
    regName() {
      let nameReg = /^[0-9a-zA-z_]{6,18}$/;
      if (nameReg.test(this.username)) {
        (this.name1 = "uname"), (this.name2 = "");

        // 判断是否重复
        this.axios.post("/regName", "username=" + this.username).then((res) => {
          let data = res.data.code;
          // console.log(data);
          if (data == 3000) {
            this.ploy = true;
            (this.name1 = "uname noname"), (this.name2 = "noname");
            this.ppp = 0;
          } else {
            this.ploy = false;
            (this.name1 = "uname"), (this.name2 = "");
            this.ppp = 1;
          }
        });
        this.regname = true;
      } else {
        (this.name1 = "uname noname"), (this.name2 = "noname");
        this.regname = false;
      }
    },
    regPwd() {
      let upwdReg = /^[0-9a-zA-z]{6,18}$/;
      if (upwdReg.test(this.upwd)) {
        (this.pwd1 = "upwd"), (this.pwd2 = "");

        return true;
      } else {
        (this.pwd1 = "upwd nopwd"), (this.pwd2 = "nopwd");

        return false;
      }
    },
    regEmail() {
      //邮箱验证
      let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (emailReg.test(this.email)) {
        this.uemail1 = "uemail";
        this.uemail2 = "";

        return true;
      } else {
        this.uemail1 = "uemail noemail";
        this.uemail2 = "noemail";
        return false;
      }
    },
    reg() {
      if (this.ppp == 1 && this.regname && this.regPwd() && this.regEmail()) {
        // 发送邮件
        this.axios.get(
          "/send?uemail=" +
            this.email +
            "&uname=" +
            this.username +
            "&upwd=" +
            this.upwd
        );
        window.alert("邮件已发送到您的邮箱，请前去激活。");
        // console.log("1");
      } else {
        window.alert("请填写正确的信息");
      }
    },
  },
};
</script>